<template>
        <el-dialog class="dialog" :destroy-on-close="true" :title="title" :visible.sync="isShow" :close-on-click-modal="false"
        @close="onDialogClose">

            <el-form ref="form" label-width="auto" class="form" :model="formData" :rules="rules">
                    <el-form-item label="规则名称:" prop="gz_name">
                        <el-input v-model="formData.gz_name" placeholder="请输入规则名称" maxlength="20" ></el-input>
                    </el-form-item>
                    <el-form-item label="考勤班次" prop="bc_sn">
                        <el-select v-model="formData.bc_sn" placeholder="请选择考勤班次">
                            <el-option v-for="item in BcData" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="打卡周期"><br />
                        <el-checkbox :true-label="1" :false-label="2" v-model="formData.day01">
                            星期一
                        </el-checkbox>
                        <el-checkbox :true-label="1" :false-label="2" v-model="formData.day02">
                            星期二
                        </el-checkbox>
                        <el-checkbox :true-label="1" :false-label="2" v-model="formData.day03">
                            星期三
                        </el-checkbox>
                        <el-checkbox :true-label="1" :false-label="2" v-model="formData.day04">
                            星期四
                        </el-checkbox>
                        <el-checkbox :true-label="1" :false-label="2" v-model="formData.day05">
                            星期五
                        </el-checkbox>
                        <el-checkbox :true-label="1" :false-label="2" v-model="formData.day06">
                            星期六
                        </el-checkbox>
                        <el-checkbox :true-label="1" :false-label="2" v-model="formData.day07">
                            星期日
                        </el-checkbox>

                    </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="onDialogClose">取 消</el-button>
            <el-button class="btn-confirm" @click="onSubmit">
                确 定
            </el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, Getter } from "vuex-class";
import { mixinDialogForm } from "@/mixin/dialog/Form";
@Component({
    name: "kqDoorGzEdit",
    mixins: [mixinDialogForm]
})
export default class kqDoorEdit extends Vue {
    @Action("kqGz/add") itemAdd: any;
    @Action("kqGz/edit") itemEdit: any;
    @Action("kqBc/all") getBcData: any;
    @Getter("kqBc/all") BcData: any;
    mounted() {
        this.getBcData();
    }
    editInit(data: any) {
        const me = this as any;
        me.formData = Object.assign({}, me.formData, data);
        me.checkedTree();
    }

   
    // 表单数据
    formData: any = {
        gz_name: "",
        bc_sn: "",
        day01: "2",
        day02: "2",
        day03: "2",
        day04: "2",
        day05: "2",
        day06: "2",
        day07: "2"
    };
    roledata: any = [];
    // 表单验证
    rules: any = {
        gz_name: [
            {
                required: true,
                message: "请输入考勤规则名称"
            }
        ],
        bc_sn: [
            {
                required: true,
                message: "请选择考勤班次"
            }
        ]
    };

    @Action('kqGz/all') getAll: any;
    successAfter() {
        // 刷新列表
        this.getAll(true);
    }
    // 标题
    get title() {
        return (this as any).isEdit ? "编辑考勤规则" : "新增勤规则";
    }
}
</script>